<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.indexedlist.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}

			#done.mui-disabled {
				color: gray;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择标签类型</h1>
			<a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue">保存</a>
		</header>
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search" style="display: none;">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
				</div>
				<div class="mui-indexed-list-bar">

				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view" id="divContent">
						<!-- 
						<li data-value="AKU" data-tags="AKeSu"
							class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
							<input type="checkbox" id="11" checked />阿克苏机场
						</li>
						<li data-value="BPL" data-tags="ALaShanKou"
							class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
							<input type="checkbox" id="22" />阿拉山口机场
						</li>
						-->
					</ul>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.indexedlist.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="libs/lib.js"></script>
		<script type="text/javascript" charset="utf-8">
			var tagTypeList = [];
			var checkboxList = [];
			mui.init();
			mui.ready(function() {
				TagType_Map_List();
			});

			function TagType_Map_List() {
				var bindId = Core.Tool.GetUrlParam("bindId");
				var mapType = Core.Tool.GetUrlParam("mapType");
				var param = {
					Param:{
						MapType: mapType,
						BindId: bindId
					}					
				}
				Core.Post("Map/TagTypeList", param, function(result, status) {
					if (result.errorMsg) {
						Core.Msg.Alert(result.errorMsg);
						return;
					}
					if (!result.data)
						return;						
					var list = result.data.lstBind;					

					var html = "";
					var index = -1;
					for (var i = 0; i < list.length; i++) {
						index = result.data.lstDataId.indexOf(list[i].dataId+"");
						html +=
							" <li data-value='aku' data-tags='akesu' class='mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left'> ";
						html += " 	 <input type='checkbox' id='" + list[i].dataId + "' " + (index > -1 ? "checked" :
							"") + "/>" + list[i].dataName;
						html += " </li> ";
					}
					document.getElementById("divContent").innerHTML = html;

					Page_Init();
				});
			}
			
			function TagType_Map_Save() {
				var bindId = Core.Tool.GetUrlParam("bindId");
				var mapType = Core.Tool.GetUrlParam("mapType");
				var lstDataId = [];
				for(var i=0;i<checkboxList.length;i++){
					lstDataId.push(checkboxList[i].id);
				}
				var param = {
					Param:{
						MapType: mapType,
						BindId: bindId,
						lstDataId :lstDataId
					}					
				}
				Core.Post("Map/TagTypeSave", param, function(result, status) {
					if (result.errorMsg) {
						Core.Msg.Alert(result.errorMsg);
						return;
					}
					
					window.location.href = "map_tagtype.html?mapType="+mapType;
				});
			}

			function Page_Init() {
				var header = document.querySelector('header.mui-bar');
				var list = document.getElementById('list');
				var done = document.getElementById('done');
				//calc hieght
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);
				//done event
				done.addEventListener('tap', function() {
					var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
					var checkedValues = [];
					checkboxArray.forEach(function(box) {
						if (box.checked) {
							checkedValues.push(box.parentNode.innerText);
						}
					});
					if (checkedValues.length > 0) {
						//mui.alert('你选择了: ' + checkedValues);
						TagType_Map_Save();
					} else {
						mui.alert('你没有选择任何信息');
					}
				}, false);
				mui('.mui-indexed-list-inner').on('change', 'input', function() {
					checkboxList = list.querySelectorAll('input[type="checkbox"]:checked');
					var count = checkboxList.length;
					var value = count ? "完成(" + count + ")" : "完成";
					done.innerHTML = value;
					if (count) {
						if (done.classList.contains("mui-disabled")) {
							done.classList.remove("mui-disabled");
						}
					} else {
						if (!done.classList.contains("mui-disabled")) {
							done.classList.add("mui-disabled");
						}
					}
				});
			}
		</script>
	</body>

</html>